<template>
  <div class="listWapper">
    <customDetailsTopbar title="节能诊断及评估" flag @back="back" />
    <div id="customScroolBox" class="listInner px-1">
      <div class="d-flex mt-2 w-100">
        <custom-radio-tag1 class="mb-1 w-100" :list="tagList" :value="checkedValue" is-scroll @change="tagChange" />
      </div>
      <customSearch ref="customSearch" placeholder="请输入企业名称" title="节能诊断及评估列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <div v-if="tableList.length" class="common_list">
        <div v-for="(item,index) in tableList" :key="index" class="list_item" @click="goDetail(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
              </div>
              <ul class="des-list">
                <li v-for="(des,ind) in desList" :key="des.value" class="des">
                  <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                  <div class="label">{{ des.label }}：</div>
                  <div class="value">{{ item[des.value] }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
      <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
        <div class="pop-vertical-flex">
          <div class="pop-content">
            <!--            <customPopCheckbox :list="selectOptionAll['企业类别']" :check-value.sync="form.type" title="企业类别：" />-->
            <customPopCheckbox :list="selectOptionAll['行业类别-fixed']" :check-value.sync="form.type" title="行业类别" />
            <customPopCheckbox :list="selectOptionAll['能源-是否重点用能单位']" :check-value.sync="form.isEnergy" title="是否重点用能单位" />
            <custom-timer v-if="checkedValue === 3" type="year" title="年份：" :is-interval="false" :picker-title="'请选择所属年份'" :date-value="form.years" @update:dateValue="getTime" />
            <template v-if="checkedValue === 3">
              <customPopCheckbox :list="whetherArr" :check-value.sync="form.isGroups" title="集团是否评估" />
              <customPopCheckbox :list="whetherArr" :check-value.sync="form.isEnterprises" title="企业是否自评" />
              <customPopCheckbox :list="whetherArr" :check-value.sync="form.isPartys" title="第三方是否评估" />
            </template>
            <template v-if="checkedValue !== 3">
              <custom-timer :start.sync="form.startTime" :end.sync="form.endTime" title="评估时间" />
            </template>
          </div>
          <div class="pop-bottom">
            <van-button type="default" @click="resetSuperSearch">清空</van-button>
            <van-button type="info" @click="handleSuperSearch">确认</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { energyEvaluateList, energyEvaluateSummaryList } from '@/api/energySources'

export default {
  mixins: [commonList],
  data() {
    return {
      current: '',
      total: 0,
      pages: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
        energyType: 1,
        type: '',
        years: '',
        isEnergy: '',
        industryType: '',
        companyIds: -1,
        startTime: '',
        endTime: '',
        isGroups: '',
        isEnterprises: '',
        isPartys: ''
      },
      active: 'one',
      isEnergyList: [
        { label: '是', value: 1 },
        { label: '否', value: 0 }
      ],
      tagList: [
        { label: '集团诊断评估', value: 0 },
        { label: '企业诊断评估', value: 1 },
        { label: '第三方诊断评估', value: 2 },
        { label: '汇总展示', value: 3 }
      ],
      checkedTag: '集团诊断评估',
      checkedValue: 0,
      desListMap: {
        '集团诊断评估': [
          // { label: '企业类别', value: 'category', icon: '&#xe634;' },
          { label: '行业类别', value: 'industryTypeName', icon: '&#xe790;' },
          { label: '是否重点用能单位', value: 'isEnergyName', icon: '&#xe725;' },
          { label: '年份', value: 'year', icon: '&#xe8d5;' },
          { label: '评估时间', value: 'energyTime', icon: '&#xe685;' },
          { label: '评估方', value: 'estimate', icon: '&#xe60d;' }
        ],
        '企业诊断评估': [
          // { label: '企业类别', value: 'category', icon: '&#xe634;' },
          { label: '行业类别', value: 'industryTypeName', icon: '&#xe790;' },
          { label: '是否重点用能单位', value: 'isEnergyName', icon: '&#xe87e;' },
          { label: '年份', value: 'year', icon: '&#xe8d5;' },
          { label: '评估时间', value: 'energyTime', icon: '&#xe685;' },
          { label: '评估机构', value: 'estimate', icon: '&#xe60d;' }
        ],
        '第三方诊断评估': [
          // { label: '企业类别', value: 'category', icon: '&#xe634;' },
          { label: '行业类别', value: 'industryTypeName', icon: '&#xe790;' },
          { label: '是否重点用能单位', value: 'isEnergyName', icon: '&#xe87e;' },
          { label: '年份', value: 'year', icon: '&#xe8d5;' },
          { label: '评估时间', value: 'energyTime', icon: '&#xe685;' },
          { label: '评估机构', value: 'estimate', icon: '&#xe60d;' }
        ],
        '汇总展示': [
          // { label: '企业类别', value: 'category', icon: '&#xe634;' },
          { label: '行业类别', value: 'industryTypeName', icon: '&#xe790;' },
          { label: '是否重点用能单位', value: 'isEnergyName', icon: '&#xe87e;' },
          { label: '年份', value: 'year', icon: '&#xe8d5;' },
          { label: '集团是否评估', value: 'isGroup', icon: '&#xe67a;' },
          { label: '企业是否自评', value: 'isEnterprise', icon: '&#xe67a;' },
          { label: '第三方是否评估', value: 'isParty', icon: '&#xe67a;' }
        ]
      },
      whetherArr: [
        {
          label: '是',
          value: '是',
          text: '是'
        }, {
          label: '否',
          value: '否',
          text: '否'
        }
      ],
      desList: [],
      tableList: []
    }
  },
  mounted() {
    const { checkedTag, current } = this.$route.query
    this.checkedTag = checkedTag || '集团诊断评估'
    this.checkedTag === '汇总展示' ? this.active = 'two' : this.active = 'one'
    this.checkedValue = this.tagList.find(v => {
      if (v.label === this.checkedTag) {
        return v
      }
    }).value
    this.form.energyType = Number(this.checkedValue) + 1
    this.current = current || ''
    this.desList = this.desListMap[this.checkedTag]
    this.getList()
  },
  methods: {
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    async getList() {
      this.layout.showLoading()
      this.$refs.customLoadmore.loadStatus = true
      const api = {
        'one': energyEvaluateList,
        'two': energyEvaluateSummaryList
      }
      const { status, data } = await api[this.active](this.form)
      if (status === 0 && data) {
        this.tableList = this.tableList.concat(data.list)
        this.total = data.total
        this.pages = data.pages
      }
      this.layout.hideLoading()
      this.$refs.customLoadmore.loadStatus = false
    },
    goDetail(item) {
      // if (this.checkedTag !== '汇总展示') {
      let itemStr
      if (this.checkedTag !== '集团诊断评估') {
        itemStr = JSON.stringify(item)
      }
      this.$router.push({
        path: '/staging/energySavingDiagnosisDetail',
        query: { current: this.current, tag: this.checkedTag, id: item.id, details: itemStr }
      })
      // }
    },
    tagChange(val) {
      this.resetSuperSearch()
      this.checkedTag = val.item.label
      this.checkedValue = val.index
      this.active = this.checkedTag !== '汇总展示' ? 'one' : 'two'
      this.desList = this.desListMap[this.checkedTag]
      this.form.energyType = Number(this.checkedValue) + 1
      this.tableList = []
      this.form.pageNum = 1
      if (this.checkedValue === 3) {
        this.form.years = new Date().getFullYear() + ''
      }
      this.getList()
    },
    getTime(val) {
      this.form.years = val
    },
    handleSearch(val) {
      this.form.companyName = val
      this.form.pageNum = 1
      this.tableList = []
      this.getList()
    },
    handlePages(val) {
      this.form.pageNum = val
      this.getList()
    },
    resetSuperSearch() {
      // this.superSearch = false
      // this.form.pageNum = 1
      this.form.type = ''
      this.form.years = ''
      this.form.isEnergy = ''
      this.form.industryType = ''
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.isGroups = ''
      this.form.isEnterprises = ''
      this.form.isPartys = ''
      this.form.companyName = ''
      this.$refs.customSearch.restore()
      // this.tableList = []
      // this.getList()
    },
    handleSuperSearch() {
      this.form.pageNum = 1
      this.tableList = []
      this.superSearch = false
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.right_content{
  .des-list{
    display: flex;
    flex-wrap: wrap;
    .des{
      width: 100%;
    }
  }
}
</style>
